/* * @Author: wangsh  * @Date: 2019-05-11 19:45:44  */
import React, { PureComponent } from 'react';
import {
  Form, Icon, Input, Button, notification
} from 'antd';
import './index.scss';

class Login extends PureComponent {
  componentDidMount() {
    window.document.title = '用户登录';
  }

  handleSubmit = (e) => {
    const { history } = this.props;
    e.preventDefault();
    this.props.form.validateFields((err) => {
      if (!err) {
        history.push('/');
        notification.open({
          message: '消息提示',
          description: '欢迎，王思涵 上次登陆时间：2019/5/10',
        });
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-bg">
        <div className="login-wrapp">
          <div className="login-box">
            <div className="login-title">用户登陆</div>
            <Form onSubmit={this.handleSubmit} className="login-form">
              <Form.Item>
                {getFieldDecorator('userName', {
                  rules: [{ required: true, message: '请输入用户名!' }],
                })(
                  <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} autoComplete="off" placeholder="用户名" />
                )}
              </Form.Item>
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [{ required: true, message: '请输入密码' }],
                })(
                  <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                )}
              </Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">用户 登陆</Button>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}

export default Form.create()(Login);
